<script setup lang="ts">
const emits = defineEmits<{
  (e: 'search'): void
  (e: 'add'): void
}>()

const query: {
  keyword?: string
} = reactive({
  keyword: undefined,
})

defineExpose({
  query,
})
</script>

<template>
  <ElForm
    inline
    :model="query"
    label-width="80px"
    label-position="left"
  >
    <ElFormItem label="关键字">
      <ElInput
        v-model="query.keyword"
        clearable
        placeholder="请输入关键字"
      />
    </ElFormItem>
    <ElFormItem>
      <SearchButton @click="emits('search')" />
      <AddButton @click="emits('add')" />
    </ElFormItem>
  </ElForm>
</template>
